﻿@namespace BlazorFluentUI
@inherits FluentUIComponentBase

<div class=@($"mediumFont ms-DatePicker{(IsDatePickerShown ? " ms-DatePicker--is-open" : "" )} {(Disabled ? " ms-DatePicker--is-disabled" : "" )} {ClassName}")
     style=@Style>
    <div aria-haspopup="true"
         aria-owns=@(IsDatePickerShown ? calloutId : "")
         @ref="datePickerDiv">
        <TextField Label=@Label
                      @ref="textFieldComponent"
                      AriaLabel=@AriaLabel
                      AriaControls=@(IsDatePickerShown ? calloutId : "")
                      Required=@IsRequired
                      Disabled=@Disabled
                      ErrorMessage=@GetErrorMessage()
                      Placeholder=@Placeholder
                      Borderless=@Borderless
                      @bind-Value=@FormattedDate
                      Underlined=@Underlined
                      ReadOnly=@(!AllowTextInput)
                      ClassName=@($"ms-DatePicker-textField")
                      IconName="calendar_ltr"
                      OnKeyDown=@OnTextFieldKeyDown
                      OnChange=@OnTextFieldChange
                      OnClick=@(args => {
                                    if (!DisableAutoFocus && !IsDatePickerShown && !Disabled)
                                    {
                                        ShowDatePickerPopup();
                                        return;
                                    }
                                    if (AllowTextInput && !IsDatePickerShown)
                                    {
                                        DisableAutoFocus = !DisableAutoFocus;
                                        //DismissDatePickerPopup();
                                    }
                                })
                      />
    </div>
    @if (IsDatePickerShown)
    {
        <Callout Role="dialog"
                 AriaLabel=@PickerAriaLabel
                 IsBeakVisible="false"
                 GapSpace="0"
                 DoNotLayer="false"
                 FabricComponentTarget="textFieldComponent"
                 DirectionalHint="DirectionalHint.BottomLeftEdge"
                 ClassName="ms-DatePicker-callout"
                 OnDismiss=@CalendarDismissed>
                 <FocusTrapZone IsClickableOutsideFocusTrap="true"
                                DisableFirstFocus=@DisableAutoFocus
                                ForceFocusInsideTrap="false">
                <Calendar OnSelectDate=@OnSelectedDate
                          OnDismiss=@CalendarDismissed
                          IsMonthPickerVisible=@IsMonthPickerVisible
                          IsTimePickerVisible=@IsTimePickerVisible
                          ShowMonthPickerAsOverlay=@ShowMonthPickerAsOverlay
                          Today=@Today
                          Value=@Value
                          FirstDayOfWeek=@FirstDayOfWeek
                          HighlightCurrentMonth=@HighlightCurrentMonth
                          HighlightSelectedMonth=@HighlightSelectedMonth
                          ShowWeekNumbers=@ShowWeekNumbers
                          FirstWeekOfYear=@FirstWeekOfYear
                          ShowGoToToday=@ShowGoToToday
                          DateTimeFormatter=@DateTimeFormatter
                          MinDate=@MinDate
                          MaxDate=@MaxDate
                          ShowCloseButton=@ShowCloseButton
                          AllFocusable=@AllFocusable />
            </FocusTrapZone>
        </Callout>
    }
</div>